<template>
	<el-header>
		<div class="left-panel">
			<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
		</div>
	</el-header>
	<el-main>
		<el-row :gutter="15">
			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" class="photo photo-item"
					v-for="item in photoList" :key="item.photoId"
			>
				<el-card shadow="never" :title="item.photoTitle" @contextmenu.prevent="openMenu(item,$event)">
					<h2>#{{item.sortNo}}  {{item.photoTitle}}</h2>
					<ul style="text-align: center">
						<li>
							<el-icon style="font-size: 120px"><el-icon-picture-filled/></el-icon>
						</li>
					</ul>
					<div class="bottom">
						<div class="state">
							<el-tag v-if="item.status=='1'" size="small" type="success">启用</el-tag>
							<el-tag v-else size="small" type="danger">停用</el-tag>
						</div>
						<div class="handler">
							<el-switch v-model="item.status" :loading="item.$switch_status" @change="changeSwitch($event, item)" active-text="启用" inactive-text="停用" active-value="1" inactive-value="0"></el-switch>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</el-main>


	<sc-contextmenu ref="contextmenu" @command="handleCommand">
		<sc-contextmenu-item command="editPhoto" title="编辑相册" icon="el-icon-edit"></sc-contextmenu-item>
		<sc-contextmenu-item command="deletePhoto" title="删除相册" icon="el-icon-delete"></sc-contextmenu-item>
	</sc-contextmenu>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
import scContextmenu from '@/components/scContextmenu'
import scContextmenuItem from '@/components/scContextmenu/item'
import saveDialog from "./save";

export default {
	name: 'Net Disk Setting',
	components: {
		saveDialog,
		scContextmenu,
		scContextmenuItem
	},
	data() {
		return {
			dialog: {
				save: false
			},
			photo:{},
			photoList:[]
		}
	},
	mounted() {
		this.getPhotoList();
	},
	methods: {
		async getPhotoList(){
			var res = await this.$API.file.photo.getPhotoList.get();
			if (res.code == 200) {
				this.photoList = res.data;
			}else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		add(){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		openMenu(item,e) {
			this.photo = item;
			this.$refs.contextmenu.openMenu(e)
		},
		async changeSwitch(val, item)
		{
			item.status = item.status == '1' ? '0' : '1'
			item.$switch_status = true;
			delete item.$switch_status;
			item.status = val;
			var res = await this.$API.file.photo.update.post({photoId: item.photoId, status: item.status});
			if (res.code == 200) {
				this.$message.success(res.message)
				this.getPhotoList();
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async handleCommand(command) {
			if(command=="editPhoto")
			{
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open('edit').setData(this.photo)
				})
			}else if(command=="deletePhoto")
			{
				this.$confirm(`确认删除 ${this.photo.photoTitle} 相册吗？`, '提示', {
					type: 'warning',
					confirmButtonText: '删除',
					confirmButtonClass: 'el-button--danger'
				}).then(async () => {
					var res = await this.$API.file.photo.delete.post({photoId:this.photo.photoId});
					if (res.code == 200) {
						this.photoList.splice(this.photoList.findIndex(item => item.photoId === this.photo.photoId), 1)
					}else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				}).catch(() => {
					//取消
				})
			}
		},
		handleSuccess()
		{
			this.getPhotoList();
		},
	}
}
</script>

<style scoped>
.photo {
	height: 250px;
}

.photo-item h2 {
	font-size: 15px;
	color: #3c4a54;
	padding-bottom: 15px;
}

.photo-item li {
	list-style-type: none;
	margin-bottom: 10px;
}

.photo-item li h4 {
	font-size: 12px;
	font-weight: normal;
	color: #999;
}

.photo-item li p {
	margin-top: 5px;
}

.photo-item .bottom {
	border-top: 1px solid #EBEEF5;
	text-align: right;
	padding-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.photo-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	color: #999;
}

.photo-add:hover {
	color: #409EFF;
}

.photo-add i {
	font-size: 30px;
}

.photo-add p {
	font-size: 12px;
	margin-top: 20px;
}

.dark .photo-item .bottom {
	border-color: var(--el-border-color-light);
}

.info-title {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}
</style>
